<template>
  <ul class="list">
    <li v-for="movie in movies" :key="movie.id" @click="">
      <img :src="movie.img" :alt="`${movie.nm} poster`" />
      <h3>{{ movie.nm }}</h3>
      <div>
        <p>
          <span>🗓</span>
          <span>{{ movie.comingTitle }}</span>
        </p>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      movies: [],
    };
  },

  async mounted() {
    const response = await fetch("/comingList");
    const data = await response.json();

    this.movies = data.coming;
  },

  // activated() {
  //   console.log("ComingMovieList Activated!");
  // },

  // deactivated() {
  //   console.log("ComingMovieList Deactivated!");
  // },
};
</script>
